<template>
  <div style="margin-bottom:1px">
    <el-table :data="arr" stripe style="width: 100%">
      <el-table-column label="编号" width="70">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="用户名" width="90"></el-table-column>

      <el-table-column prop="personnelnum" label="人员编号" width="100"></el-table-column>

      <el-table-column label="所属角色" width="140">
        <!-- slot-scope  作用域插槽 filter 对象映射 -->
        <template slot-scope="scope">{{ roleObj[scope.row.role] }}</template>
      </el-table-column>

      <el-table-column label="说明" width="160">
        <template slot-scope="scope">{{ explainObj[scope.row.explain] }}</template>
      </el-table-column>

      <el-table-column prop="newdate" label="新建日期" width="180"></el-table-column>

      <el-table-column label="是否有效" width="100">
        <template slot-scope="scope">{{ typeObj[scope.row.type] }}</template>
      </el-table-column>

      <el-table-column label="操作" width="190">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="handleEdit(scope.row)">
            <span>修改</span>
          </i>
          <i class="el-icon-delete" @click="handleDelete(scope.row.id)">
            <span>删除</span>
          </i>
          <i class="el-icon-refresh-right">
            <span>重置密码</span>
          </i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteTrafficApi } from "../../../api/trafficApi";
export default {
  props: ["arr"],
  data() {
    return {
      roleObj: {
        0: "管理者",
        1: "街道负责人"
      },
      explainObj: {
        0: "该账号拥有权限",
        1: "上传车位信息"
      },
      typeObj: {
        0: "是",
        1: "否"
      }
      // tableData: [
      //   {
      //     id: 1,
      //     name: "王小虎",
      //     personnelnum: 20050011,
      //     role: 0, //0是管理者 1是街道负责人
      //     explain: 0, //0是该账号拥有权限 1是上传车位信息
      //     newdate: "2016-05-02 10:10:10",
      //     type: 0 //0 是 1 否
      //   }
      // ]
    };
  },
  methods: {
    handleEdit(row) {
      // 编辑：把当前行数据传给弹框，打开弹框
      this.$emit("updateOpenDialog", row);
    },
    handleDelete(id) {
      // 发送请求把id给后端,后端删除逻辑,通知前端,前端刷新页面即可
      let bool = window.confirm("您确定删除这条数据吗");
      if (bool) {
        deleteTrafficApi({ id: id }).then(res => {
          console.log("res", res);
          if (res.code == 200) {
            this.$emit("resetTraffic");
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
i {
  cursor: pointer;
  color: #409eff;
  span {
    color: #606266;
  }
}
</style>